<script setup lang="ts">
import { getDistributionDetail } from "@/api/orderManag/purchaseOrder";
import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { InfoFilled } from "@element-plus/icons-vue";
import { cloneDeep } from "@pureadmin/utils";
import { computed, h, onMounted, ref, watch } from "vue";
import { useColumns } from "../utils/columns";
import PreviewGoods from "./PreviewGoods.vue";
const { dphGoodsColumns } = useColumns();

const props = defineProps({
  subOrderId: {
    type: Number,
    default: 0
  },
  // 	配货单类型 1 仓库 2 供应商
  distributionType: {
    type: Number,
    default: 2
  }
});

const dphspType = ref(1); // 待配货
const tableRef = ref();
const loadGoods = ref(false);
const tableColums = ref(dphGoodsColumns);
const goodsList = ref<any>([]);
const tableSelectList = ref([]);

// 仓库发货
const showGoodsDetail = () => {
  addDialog({
    title: "商品明细预览",
    props: {
      subOrderId: props.subOrderId,
      distrCountList: distrCountList.value || []
    },
    width: "900px",
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(PreviewGoods),
    beforeSure: async done => {
      done();
    },
    beforeCancel: done => {
      done();
    }
  });
};

const distrCountList = computed(() => {
  // dphspType 1:部分发货 2:全部发货
  let tempList = [];
  if (dphspType.value == 1) {
    tempList = goodsList.value.map(v => {
      return {
        goodsId: v.goodsId,
        distributionCount: v.distributionCount || 0
      };
    });
  }
  return tempList;
});

// 选择商品
function handleSelectionChange(val) {
  tableSelectList.value = val;
}

watch(dphspType, val => {
  loadGoods.value = true;
  if (val == 1) {
    tableColums.value = cloneDeep(dphGoodsColumns);
  } else {
    tableColums.value = cloneDeep(dphGoodsColumns).slice(1, 6);
  }
  setTimeout(() => {
    loadGoods.value = false;
  }, 200);
});

// 获取商品列表
const loadGoodsList = async () => {
  loadGoods.value = true;
  let { data } = await getDistributionDetail({ subOrderId: props.subOrderId });
  goodsList.value = data || [];
  loadGoods.value = false;
};

onMounted(() => {
  loadGoodsList();
});

// 确认配货
const confirmDis = () => {
  let obj = {
    isPass: false,
    params: {}
  };

  let calcList: Array<any> = goodsList.value;
  if (dphspType.value == 1) {
    if (tableSelectList.value.length == 0) {
      message("请选择配货商品", { type: "warning" });
      return obj;
    }

    for (let index = 0; index < tableSelectList.value.length; index++) {
      const v = tableSelectList.value[index];
      if (!v.distributionCount) {
        message(`'${v.goodsName}' 未填写配货数量`, { type: "warning" });
        return obj;
      }
    }
    calcList = tableSelectList.value;
  }

  let params = {
    subOrderId: props.subOrderId,
    distributionDetailList: calcList.map(v => {
      return {
        distributionStatus: dphspType.value,
        distributionType: props.distributionType,
        goodsId: v.goodsId,
        specCode: v.specCode,
        quantityNum: dphspType.value == 1 ? v.distributionCount : v.goodsAmount
      };
    })
  };
  obj.isPass = true;
  obj.params = params;
  return obj;
};

const printObj = {
  id: "print-box", //打印区域 Dom ID
  popTitle: "商品信息打印",
  extraCss: "https://www.google.com,https://www.google.com",
  extraHead:
    '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>html,body,div{height: auto!important;} #print-box { padding-top: 10px; height: auto !important; } <style>' //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
};

defineExpose({ confirmDis });
</script>

<template>
  <div class="goods-table">
    <!-- 生成配货出库单 -->
    <div class="mb-5">
      <h3 class="text-black mb-3">生成配货出库单</h3>
      <div class="flex items-center justify-between ml-3 mb-3 w-[79%]">
        <div class="flex items-center">
          <div>配货商品</div>
          <el-radio-group v-model="dphspType" class="ml-4">
            <el-radio :value="1" label="部分发货" />
            <el-radio :value="2" label="全部发货" />
          </el-radio-group>
        </div>
        <div class="tips">
          <el-icon style="color: #409eff" class="mr-1"><InfoFilled /></el-icon>
          已生成商品明细单,用于配货或发货！
          <span v-print="printObj" class="text-blue-500 cursor-pointer mr-2">
            打印
          </span>
          <span class="text-blue-500 cursor-pointer" @click="showGoodsDetail">
            预览
          </span>
        </div>
        <!-- <el-popconfirm title="是否确认配货?" @confirm="confirmDis">
          <template #reference>
            <el-button
              :disabled="tableSelectList.length == 0"
              class="ml-5"
              type="primary"
              >确认配货</el-button
            >
          </template>
        </el-popconfirm> -->
      </div>
      <div
        v-if="!loadGoods"
        :style="{ width: dphspType == 1 ? '100%' : '80%' }"
      >
        <pure-table
          ref="tableRef"
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          max-height="500"
          :data="goodsList"
          :columns="tableColums"
          @selection-change="handleSelectionChange"
        />
      </div>
    </div>
    <!-- 商品打印 -->
    <div style="width: 0; height: 0; overflow: hidden">
      <PreviewGoods
        id="print-box"
        :subOrderId="props.subOrderId"
        isPrint
        :distrCountList="distrCountList"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  padding: 0 20px;
  margin-bottom: 25px;
  min-height: 500px;
}
.tips {
  display: flex;
  align-items: center;
  padding: 6px 15px;
  border: 1px solid #c6e2ff;
  border-radius: 5px;
  background-color: #ecf5ff;
}
</style>
